<template>
  <DetailBox :title="getRouteTitle()" :border="2">
    <template #center>
      <slot name="center">

        <el-row :gutter="12">
          <el-col :span="5">
            <ContentBox :title="'基础树'" :border="3" :marginHeight="192">
              <template #center>
                <slot name="center">
                  <div style="padding: 0px 10px">
                    <el-input v-model="filterText" placeholder="Filter keyword" />

                    <el-tree
                        ref="treeRef"
                        class="filter-tree"
                        :data="data"
                        :props="defaultProps"
                        default-expand-all
                        :filter-node-method="filterNode"
                    />
                  </div>
                </slot>
              </template>
            </ContentBox>
          </el-col>
          <el-col :span="19">
            <el-row :gutter="12">
              <el-col :span="16">
                <ContentBox :title="'内容区域'" :border="3" :height="300">
                  <template #center>
                    <slot name="center">

                    </slot>
                  </template>
                </ContentBox>
              </el-col>
              <el-col :span="8">
                <ContentBox :title="'内容区域'" :border="3" :height="300">
                  <template #center>
                    <slot name="center">

                    </slot>
                  </template>
                </ContentBox>
              </el-col>


            </el-row>
            <ContentBox :title="'内容区域'" :border="3" :marginHeight="570">
              <template #center>
                <slot name="center">

                </slot>
              </template>
            </ContentBox>
          </el-col>
        </el-row>


      </slot>
    </template>
  </DetailBox>

</template>

<script setup lang="ts">
import {reactive, ref,watch} from 'vue';
import DetailBox from "@/views/components/DetailBox.vue";
import ContentBox from "@/views/components/ContentBox.vue";
import { ElTree } from 'element-plus'
import {getRouteTitle} from "@/utils";


interface Tree {
  id: number
  label: string
  children?: Tree[]
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()

const defaultProps = {
  children: 'children',
  label: 'label',
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

const data: Tree[] = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
]

</script>

<style>
</style>
